<template>
	<rui-pages>
		<view class="doorlock">
			<view class="doorlock_head">
				<view class="doorlock_head_round" :style="`animation-duration: ${duration}s;`"></view>
				<view class="doorlock_head_box absolute" v-if="is_down">
					<view class="doorlock_head_box_span"></view>
					<view class="doorlock_head_box_span"></view>
					<view class="doorlock_head_box_span"></view>
					<view class="doorlock_head_box_span"></view>
				</view>
				<view class="doorlock_head_box2 absolute" v-else></view>

				<view class="doorlock_head_loader absolute" :style="`--progress: ${progress}%`"></view>
				<view class="doorlock_head_lock absolute" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
					<rui-icons :icon="status ? 'unlock':'lock'" size="100"
						:color="status ? '#666':'#209a82'"></rui-icons>
				</view>
			</view>

			<view class="doorlock_status">
				<view class="doorlock_status_item">
					<view class="search"></view>
					<rui-icons icon="ble" color="#fff"></rui-icons>
				</view>
				<view class="doorlock_status_item">
					<rui-icons icon="electric-8" color="#fff"></rui-icons>
				</view>
			</view>

			<view class="doorlock_nav">
				<view class="doorlock_nav_item">
					<view class="doorlock_nav_item_icon">
						<rui-icons icon="key" size="60" color="#fff"></rui-icons>
					</view>
					<view class="doorlock_nav_item_name">
						电子钥匙
					</view>
				</view>
				<view class="doorlock_nav_item" @click="$rui.route('/pages/doorlock/finger/finger')">
					<view class="doorlock_nav_item_icon">
						<rui-icons icon="finger" size="60" color="#fff"></rui-icons>
					</view>
					<view class="doorlock_nav_item_name">
						指纹
					</view>
				</view>
			</view>

			<view class="doorlock_menu">
				<view class="doorlock_menu_item" v-for="(item, index) in menu" :key="index" @click="$rui.route(item.path)">
					<view class="doorlock_menu_item_icon">
						<rui-icons :icon="item.icon" size="40" color="#25ac84"></rui-icons>
					</view>
					<view class="doorlock_menu_item_name">
						{{item.name}}
					</view>
					<view class="doorlock_menu_item_more">
						<rui-icons icon="right" color="#ccc"></rui-icons>
					</view>
				</view>
			</view>
		</view>
	</rui-pages>
</template>

<script setup>
	import {
		ref
	} from "vue"

	let duration = ref(8)
	let progress = ref(0)
	let intval = "";
	let status = ref(0)

	let is_down = ref(false)

	let menu = ref([{
			name: "密码",
			icon: "password",
			path: "/pages/doorlock/password/password"
		},
		{
			name: "门卡",
			icon: "card",
			path: "/pages/doorlock/card/card"
		},
		{
			name: "消息提醒",
			icon: "notify",
			path: "/pages/doorlock/message/message"
		},
		{
			name: "操作记录",
			icon: "record",
			path: "/pages/doorlock/log/log"
		},
		{
			name: "设备设置",
			icon: "setting",
			path: "/pages/doorlock/setting/setting"
		},
		{
			name: "授权管理员",
			icon: "admin"
		},
	])

	const handleTouchStart = (e) => {
		if (status.value) return;
		duration.value = 5;
		is_down.value = true;
		intval = setInterval(() => {
			if (progress.value >= 100) {
				status.value = 1;
				return;
			}
			progress.value += 1
		}, 10)

	}

	const handleTouchEnd = (e) => {
		duration.value = 8;
		progress.value = 0;
		is_down.value = false;
		clearInterval(intval)
	}
</script>

<style lang="scss" scoped>
	.doorlock {
		--lc: linear-gradient(45deg, #1c8780, #25ac84);


		&_menu {
			background: #fff;
			padding: 30rpx;
			margin: 30rpx;
			border-radius: 30rpx;

			&_item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				position: relative;

				&_more {
					position: absolute;
					right: 0;
					top: 35rpx;
				}

				&_icon {
					// background: var(--lc);
					width: 55rpx;
					height: 55rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 55rpx;
					margin-right: 20rpx;
				}
			}
		}

		&_nav {
			display: flex;
			flex-wrap: wrap;
			background: #fff;
			padding: 50rpx 0;
			margin: 30rpx;
			border-radius: 30rpx;

			&_item {
				width: calc(50% - 1rpx);
				text-align: center;
				border-right: 1rpx solid #eee;

				&:last-child {
					border-right: none;
				}

				&_icon {
					background: var(--lc);
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin: 0 auto;
					text-align: center;
					line-height: 100rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		&_status {
			display: flex;
			justify-content: center;
			// position: absolute;
			// bottom: 10rpx;
			// left: 50%;
			// transform: translate(-50%, 0);


			.search {
				width: 36rpx;
				height: 36rpx;
				animation: pulse 1s linear infinite;
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				background: #666;
				border-radius: 50%;
				// transform: translate(-50%, -50%);
			}

			@keyframes pulse {
				from {
					transform: scale(0.9);
					opacity: 1;
				}

				to {
					transform: scale(1.8);
					opacity: 0;
				}
			}

			&_item {
				height: 50rpx;
				width: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, .3);
				margin: 20rpx;
				position: relative;
			}
		}

		&_head {
			height: 600rpx;
			position: relative;
			overflow: hidden;
			// background: linear-gradient(45deg, #1c8780, #25ac84);

			.absolute {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			&_round {
				width: 400rpx;
				height: 400rpx;
				border: 3px dotted rgba(0, 0, 0, .1);
				border-style: solid solid dotted dotted;
				border-radius: 50%;
				box-sizing: border-box;
				animation: rotation linear infinite;
				position: absolute;
				top: calc(50% - 200rpx);
				left: calc(50% - 200rpx);
			}

			@keyframes rotation {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			&_box2 {
				width: 350rpx;
				height: 350rpx;
				border-radius: 50%;
				background-color: #9b59b6;
				background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
			}

			&_box {
				// background: var(--lc);
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
				animation: rotate_3922 1.2s linear infinite;
				background-color: #9b59b6;
				background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);

				&::after {
					content: "";
					position: absolute;
					top: 10px;
					left: 10px;
					right: 10px;
					bottom: 10px;
					background-color: #fff;
					border: solid 5px #ffffff;
					border-radius: 50%;
				}

				&_span {
					position: absolute;
					border-radius: 50%;
					height: 100%;
					width: 100%;
					background-color: #9b59b6;
					background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
				}

				&_span:nth-of-type(1) {
					filter: blur(5px);
				}

				&_span:nth-of-type(2) {
					filter: blur(10px);
				}

				&_span:nth-of-type(3) {
					filter: blur(25px);
				}

				&_span:nth-of-type(4) {
					filter: blur(50px);
				}

			}

			@keyframes rotate_3922 {
				from {
					transform: translate(-50%, -50%) rotate(0deg);
				}

				to {
					transform: translate(-50%, -50%) rotate(360deg);
				}
			}

			&_loader {
				border-radius: 50%;
				width: 220rpx;
				height: 220rpx;
				background: conic-gradient(#25ac84 0% var(--progress, 0%), #fff var(--progress, 0%) 100%);
				box-shadow: 0 0 40rpx rgba(0, 0, 0, .3);
				transition: all .3s;
			}


			&_lock {
				background: #fff;
				width: 200rpx;
				height: 200rpx;
				line-height: 180rpx;
				border-radius: 50%;
				text-align: center;
			}
		}
	}
</style>